<template>
  <div class="view">
    <div class="app-container">
      <div class="view-top">
        <el-form ref="form" :inline="true" :model="formInline">
          <el-form-item label="IP">
            <el-input v-model="formInline.ip" placeholder="请输入 IP 地址" />
          </el-form-item>
          <el-form-item label="UA">
            <el-input
              v-model="formInline.userAgent"
              placeholder="请输入 User Agent"
            />
          </el-form-item>
          <el-form-item label="URL">
            <el-input v-model="formInline.url" placeholder="请输入 URL" />
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="formInline.address" placeholder="请输入 地址" />
          </el-form-item>
          <el-form-item label="浏览器">
            <el-input v-model="formInline.browser" placeholder="请输入浏览器" />
          </el-form-item>
          <el-form-item label="内核">
            <el-input v-model="formInline.engine" placeholder="请输入内核" />
          </el-form-item>
          <el-form-item label="OS">
            <el-input v-model="formInline.os" placeholder="请输入操作系统" />
          </el-form-item>
          <el-form-item label="设备">
            <el-input v-model="formInline.device" placeholder="请输入设备" />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
            >搜索</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="view-main">
        <div class="actions">
          <div>
            <p v-show="showAction">
              <el-button @click="headleSum">删除</el-button>
            </p>
          </div>
          <div>
            <svg
              viewBox="64 64 896 896"
              focusable="false"
              data-icon="reload"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
              @click="submitForm"
            >
              <path
                d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"
              />
            </svg>
          </div>
        </div>
        <div class="table">
          <el-table
            v-loading="loading"
            :data="viewList"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column fixed label="URL" width="300">
              <template slot-scope="scope">
                <a :href="scope.row.url">{{ scope.row.url }}</a>
              </template>
            </el-table-column>
            <el-table-column prop="ip" label="IP" width="120" />
            <el-table-column prop="browser" label="浏览器" width="120" />
            <el-table-column prop="engine" label="内核" />
            <el-table-column prop="os" label="操作系统" />
            <el-table-column prop="device" label="设备" />
            <el-table-column prop="address" label="地址" width="300" />
            <el-table-column label="访问量" width="120">
              <template slot-scope="scope">
                <span
                  :style="{
                    background: 'rgb(109, 197, 20)',
                    padding: '2px 8px',
                    BorderRadius: '50%',
                  }"
                >{{ scope.row.count }}</span>
              </template>
            </el-table-column>
            <el-table-column label="发布时间" width="120">
              <template slot-scope="scope">
                <p>{{ scope.row.updateAt | formatDate }}</p>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="handleClick(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="1"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="viewCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <Footer />
    </div>
  </div>
</template>

<script>
import { deleteView } from '@/api/view'
import { Message } from 'element-ui'
import { mapState, mapActions, mapMutations } from 'vuex'
import Footer from '@/components/Footer/Footer'
export default {
  components: {
    Footer
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      formInline: {
        ip: '', // ip
        userAgent: '', // ua
        url: '', // url
        address: '', // 地址
        browser: '', // 浏览器
        engine: '', // 内核
        os: '', // 操作系统
        device: '' // 设备
      },
      showAction: false,
      loading: false
    }
  },
  computed: {
    ...mapState({
      // 获取所有数据
      viewList: (state) => state.view.viewList,
      // 一共有多少条数据
      viewCount: (state) => state.view.viewCount,
      // 全选框的数据
      selectionList: (state) => state.view.selectionList
    })
  },
  created() {
    this.submitForm()
  },
  methods: {
    ...mapActions({
      // 异步方法  获取数据
      getView: 'view/getView'
    }),
    ...mapMutations({
      // 更新数据
      update: 'view/update'
    }),
    // 删除按钮
    headleSum() {
      // 遍历要删除的数组
      this.selectionList.forEach(async(item) => {
        // 删除接口
        const result = await deleteView(item.id)
        console.log(result)
        // 判断状态
        if (result.statusCode === 200) {
          Message.success('删除成功')
          this.submitForm()
        } else {
          Message.warning('删除失败')
        }
      })
    },
    // 搜索
    async submitForm() {
      // 懒加载动画
      this.loading = true
      const options = {}
      // 遍历对象
      for (const key in this.formInline) {
        // 赋值
        this.formInline[key] && (options[key] = this.formInline[key])
      }
      // 异步请求
      await this.getView({ page: this.page, options, pageSize: this.pageSize })
      // 结束懒加载动画
      this.loading = false
    },
    // 重置
    resetForm() {
      // 遍历
      for (const key in this.formInline) {
        // 值为空
        this.formInline[key] = ''
      }
    },
    async handleClick(row) {
      console.log(row)
      const result = await deleteView(row.id)
      console.log(result)
      if (result.statusCode === 200) {
        Message.success('删除成功')
        this.submitForm()
      } else {
        Message.warning('删除失败')
      }
    },
    handleSelectionChange(selection) {
      this.showAction = !!selection.length
      this.update({ selectionList: selection })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.submitForm()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.page = val
      this.submitForm()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped lang="scss">
.view {
  background: #eee;
  .view-top {
    background: #fff;
    padding-top: 10px;
    padding-left: 10px;
  }
  .view-main {
    background: #fff;
    margin-top: 20px;
    .actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        padding: 10px 20px;
        height: 84px;
        display: flex;
        align-items: center;
      }
    }
    .table {
      width: 97%;
      margin: 0 auto;
      .el-pagination {
        height: 50px;
        margin-top: 20px;
      }
    }
  }
}
</style>
